<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Less Blue Primary Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5.0 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Override the primary button color */
.btn-primary {
background-color: #4682B4; /* Less intense blue (Steel Blue) */
border-color: #4682B4;
}
.btn-primary:hover {
background-color: #3A6D9A;
border-color: #3A6D9A;
}
</style>
</head>
<body>
<div class="container mt-5 text-center">
<h1>Custom Primary Button</h1>
<button class="btn btn-primary" id="customBtn">Click Me</button>
</div>
<script>
$('#customBtn').click(function () {
alert('You clicked the button!');
});
</script>
</body>
</html>